<!-- 它的粉丝 -->
<template>
<div>
  <div class="details-header">
    <span class="top-left">＜返回</span>
    <span class="top-right">
      <span style="color:gray;">关注</span>
      <span>粉丝</span>
    </span>
  </div>
  <div class="details-body">
    <div class="searchs">
      <input type="text" class="search" placeholder="搜索用户">
    </div>
    <div class="fans-content">
      <FanInfo />
    </div>
  </div>
</div>
</template>

<script>
import FanInfo from './FanInfo.vue'

export default {
  name: 'ItFans',
  props: {
  },
  data () {
    return {
    }
  },
  methods: {
  },
  components:{
    FanInfo
  }
}
</script>

<style scoped>
  /* 关注&&粉丝：标题区 */
.details-header{
  width:100%;
  font-family:'Microsoft YaHei';
  font-size:17px;
  height:2.2rem;
  text-align: center;
  background: #2D2D2D;
  color:white;
  position:fixed;
  top:0;
  left:0;
}
.top-left{
  position:absolute;
  left:1rem;
  line-height:2rem;
}
.top-right{
  line-height:2rem;
}

/* 内容区 */
.details-body{
  margin-top:2.2rem;
  background: #F0EFF5;
  position:relative;
}

/* 搜索区 */
.searchs{
  background:#F0EFF5;
}
.search{
  width:90%;
  margin-left:5%;
  height:1.625rem;
  outline:none;
  font-size:12px;
  margin-top: 0.45rem;
  border: 1px solid #E6E6E6;
  text-align: center;
}


/* 关注区 */
.fans-content{
  margin-top:0.25rem;
  width:100%;
  height:31.25rem;
  font-size:16px;
  background: #F0EFF5;
}
.fan-item{
  width:98%;
  margin-left:1%;
  height:3.125rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid gray;
  position: relative;
}


</style>
